<template>
    <div>
        <el-card>
            <!--分类和搜索查询-->
            <div class="searchOrder">
                <el-input
                        placeholder="请输入内容"
                        v-model="searchInfo.query"
                        class="input-with-select"
                        clearable
                        @change="getAllOrderList">
                    <el-select
                            @change="getAllOrderList"
                            v-model="searchInfo.type"
                            slot="prepend"
                            placeholder="请选择">
                        <el-option label="全部" value="0"></el-option>
                        <el-option
                                label="未付款"
                                value="1">
                        </el-option>
                        <el-option
                                label="已经付款"
                                value="2">
                        </el-option>
                        <el-option
                                label="未完成"
                                value="3">
                        </el-option>
                        <el-option
                                label="已完成"
                                value="4">
                        </el-option>
                    </el-select>
                    <el-button slot="append" style="background-color: #FFc300" icon="el-icon-search" @click="getAllOrderList"></el-button>
                </el-input>

            </div>
            <el-table
                    :data="orderList"
                    border
                    style="width: 100%"
                    v-loading="isLoading">
                <el-table-column
                        type="expand"
                        label="详情"
                        width="50">
                    <template slot-scope="scope">
                      <!--使用订单详情组件展示详情-->
                      <OrderDetailInfo
                          v-for="dish in scope.row.dishList"
                          :key="dish.did"
                          :dish="dish">
                      </OrderDetailInfo>

                    </template>
                </el-table-column>
                <el-table-column
                        type="index"
                        :index="1" label="#" width="100">
                </el-table-column>
                <el-table-column
                        prop="deskName"
                        label="地址"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="下单用户"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.user.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="手机号码"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.user.mobile}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="orderTime"
                        label="下单时间"
                        width="200"
                        sortable>
                </el-table-column>
                <el-table-column
                        label="总金额">
                    <template slot-scope="scope">
                        <span>￥{{scope.row.totalMoney}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="是否付款"
                        sortable
                         sort-by="pay">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.pay"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="updateUserPayState(scope.row.oid,scope.row.pay)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="是否完成"
                        sortable
                        sort-by="finish">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.finish"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="completeOrder(scope.row.oid,scope.row.finish)">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[10, 15, 20]"
                    :page-size="searchInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :current-page="searchInfo.pagenum">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import OrderDetailInfo from "@/components/OrderDetailInfo";

export default {
        name: "Order",
        components:{
          OrderDetailInfo
        },
        data(){
            return {
                orderList:[],
                searchInfo:{
                    query:'',
                    type:0,
                    pagenum:1,
                    pagesize:10
                },
                total:0,
                isLoading:true
            }
        },
        methods:{
           async getAllOrderList(){
              this.isLoading=true
              const {data:res}=await this.$http.get("/order/findOrders",{params:this.searchInfo})
               if (res.status!=200)return this.$message.error("查询订单列表失败")
               this.orderList=res.data.orders;
               this.total=res.data.total
              this.isLoading=false
            },
            //当页面大小发生变化时调用的钩子函数
            handleSizeChange(newSize){
                this.searchInfo.pagesize=newSize;
                this.getAllOrderList();
            },
            //当页数发生变化时调用的钩子
            handleCurrentChange(newPage){
               this.searchInfo.pagenum=newPage;
               this.getAllOrderList();
            },
            //结束订单
            completeOrder(oid,state){
               let title=''
               if (state)title='你确定要结束订单吗?'
                else title='你确定要修改订单吗?'
                this.$confirm(title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    //结束订单
                    if (state){
                        const{data:res}=await this.$http.put("/order/finishOrder/"+oid+"/"+1)
                        if (res.status!=200)return this.$message.error("订单结束失败");
                        this.$message.success("订单已结束")
                    }else {
                        const{data:res}=await this.$http.put("/order/finishOrder/"+oid+"/"+0);
                        if (res.status!=200)return this.$message.error("订单修改失败");
                        this.$message.success("订单修改成功")
                    }
                    this.getAllOrderList();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    this.getAllOrderList();
                });
            },
            //修改用户的付款状态
            updateUserPayState(oid,state){
                this.$confirm('你确定要修改付款状态吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    //结束订单
                    if (state){
                        const{data:res}=await this.$http.put("/order/payOrder/"+oid+"/"+1)
                        if (res.status!=200)return this.$message.error("修改付款状态失败");
                        this.$message.success("修改付款状态成功")
                    }else {
                        const{data:res}=await this.$http.put("/order/payOrder/"+oid+"/"+0);
                        if (res.status!=200)return this.$message.error("修改付款状态失败");
                        this.$message.success("修改付款状态成功")
                    }
                    this.getAllOrderList();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    this.getAllOrderList();
                });
            },
          //校验权限
          checkRolePower(pid){
            return this.$checkRolePower(pid);
          }
        },
      created() {
            this.getAllOrderList()
        }
    }
</script>

<style scoped>
    .input-with-select{
        width: 300px;
    }
    .searchOrder{
        margin-bottom: 20px;
    }
    .el-table{
        margin-bottom: 15px;
    }

</style>
